<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载glb模型</title>
    <script src="./Build/CesiumUnminified/Cesium.js"></script>
    <style>
      @import url(./Build/CesiumUnminified/Widgets/widgets.css);

      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #infoBox{
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        background: rgba(42, 42, 42, 0.8); 
        color: white; 
        padding: 10px; 
        border-top: 2px solid #fff; 
        font-family: Arial, sans-serif; 
        z-index: 1000; 
        box-sizing: border-box;
      }
    </style>
</head>
<body>
  <!-- TODO:需做一个日期轴可控制的每次加载的模型 -->
    <div id="cesiumContainer"></div>
    <div id="infoBox" style="display: flex; justify-content: space-around; font-size: 14px;">
        <p>鼠标经度: <span id="longitude">N/A</span></p>
        <p>鼠标纬度: <span id="latitude">N/A</span></p>
        <!-- <p>鼠标高度: <span id="height">N/A</span></p> -->
        <p>相机Heading: <span id="heading">N/A</span></p>
        <p>相机Pitch: <span id="pitch">N/A</span></p>
        <p>相机Roll: <span id="roll">N/A</span></p>
        <div>相机高度: <span id="cameraHeight">N/A</span></div>
    </div>
    <input type="file" id="fileInput" multiple  accept=".glb,.gltf" style="position: absolute; top: 10px; left: 10px; z-index: 1000;">
    <script src="./scripts/loadglb.js" ></script>
</body>
</html>